<!--

    Copyright (c) 2015-2017 Red Hat, Inc.
    All rights reserved. This program and the accompanying materials
    are made available under the terms of the Eclipse Public License v1.0
    which accompanies this distribution, and is available at
    http://www.eclipse.org/legal/epl-v10.html

    Contributors:
      Red Hat, Inc. - initial API and implementation

-->
<ng-form flex layout="column" name="stackForm">
  <che-toolbar che-title="{{stackController.stack ? stackController.stack.name : stackController.stackId}}"
               che-title-icons-controller="stackController"
               che-breadcrumb-title="All stacks"
               che-breadcrumb-href="#/stacks"
               che-subheader-title="{{stackController.stack.type}}">
    <che-button-primary ng-disabled="!stackForm.$valid"
                        che-button-title="Test" name="testButton"
                        ng-click="stackController.showSelectTemplateDialog($event)"></che-button-primary>
    <che-button-save-flat ng-disabled="!stackController.isStackChange || !stackForm.$valid"
                          che-button-title="Save" name="saveButton"
                          ng-click="stackController.saveStack()"></che-button-save-flat>
  </che-toolbar>
  <md-progress-linear md-mode="indeterminate" ng-show="stackController.loading"></md-progress-linear>
  <md-content md-scroll-y flex class="stack-content" ng-if="!stackController.loading">
    <!-- Name -->
    <che-label-container che-label-name="Name">
      <div layout="column" class="stack-details-input">
        <che-input che-form="stackForm"
                   che-name="name"
                   aria-label="Name of the stack"
                   che-place-holder="Name of the stack"
                   ng-model="stackController.stackName"
                   custom-validator="stackController.isUniqueName($value)"
                   ng-change="stackController.updateStackName()"
                   required
                   ng-maxlength="128"
                   ng-pattern="/^[A-Za-z0-9_\s\-\.\+]+$/">
          <div ng-message="required">A name is required.</div>
          <div ng-message="pattern">The name should not contain special characters like dollar, etc.</div>
          <div ng-message="maxlength">The name has to be less than 128 characters long.</div>
          <div ng-message="md-maxlength">The name has to be less than 128 characters long.</div>
          <div ng-message="customValidator">This stack name is already used.</div>
        </che-input>
      </div>
    </che-label-container>
    <!-- Description -->
    <che-label-container che-label-name="Description">
      <div layout="column" class="stack-details-input">
        <che-input che-form="stackForm"
                   che-name="description"
                   aria-label="Description of the stack"
                   che-place-holder="Description of the stack"
                   ng-change="stackController.updateStackDescription()"
                   ng-model="stackController.stackDescription"
                   ng-maxlength="128"
                   ng-pattern="/^[A-Za-z0-9_\s\-\.\,\(\)\+]+$/">
          <div ng-message="pattern">The description should not contain special characters like dollar, etc.</div>
          <div ng-message="maxlength">The description has to be less than 128 characters long.</div>
          <div ng-message="md-maxlength">The description has to be less than 128 characters long.</div>
        </che-input>
      </div>
    </che-label-container>
    <!-- stack's environments -->
    <che-label-container che-label-name="Runtimes">
      <div ng-repeat="(environmentName, environmentValue) in stackController.stack.workspaceConfig.environments">
        <workspace-environments
          environment-name="environmentName"
          workspace-config="stackController.stack.workspaceConfig"
          machines-view-status="stackController.machinesViewStatus"
          environment-on-change="stackController.updateJsonFromStack()"></workspace-environments>
      </div>
    </che-label-container>
    <!-- Commands -->
    <che-label-container che-label-name="Commands"
                         che-label-description="Commands define the commands available for workspace">
      <list-commands commands-on-change="stackController.updateJsonFromStack()"
                     commands="stackController.stack.workspaceConfig.commands"></list-commands>
    </che-label-container>
    <!-- Category -->
    <che-label-container che-label-name="Category"
                         che-label-description="Define the process for users in the workplace.">
      <div layout="column">
        <che-toggle ng-model="stackController.stack.scope" ng-change="stackController.updateJsonFromStack()"
                    md-theme="default">
          <che-toggle-button che-title="Ready-to-go" che-value="stackController.GENERAL_SCOPE"></che-toggle-button>
          <che-toggle-button che-title="Advanced" che-value="stackController.ADVANCED_SCOPE"></che-toggle-button>
        </che-toggle>
      </div>
    </che-label-container>
    <!-- Components -->
    <che-label-container che-label-name="Components"
                         che-label-description="Components are listed in the stack\'s description for users.">
      <list-components components-on-change="stackController.updateJsonFromStack()"
                       components="stackController.stack.components"></list-components>
    </che-label-container>
    <!-- stack's tags -->
    <che-label-container che-label-name="Tags"
                         che-label-description="Associate the type of templates available when creating projects for this workspace.">
      <div layout="column" flex="100" class="stack-tags">
        <md-chips flex name="stack's tags"
                  ng-model="stackController.stackTags"
                  md-transform-chip="stackController.handleTagAdding($chip)"
                  md-on-add="stackController.updateStackTags()"
                  md-on-remove="stackController.updateStackTags()"
                  secondary-placeholder="Enter stack's tags">
          <md-chip-template>
            <div class="stack-library-text">{{$chip | uppercase}}</div>
            <div class="stack-library-btn">
              <i class="fa fa-close"></i>
            </div>
          </md-chip-template>
        </md-chips>
        <div flex>
          <div class="stack-tags-reset" data-ng-click="stackController.resetTags()">Reset</div>
        </div>
      </div>
    </che-label-container>
    <!-- Configuration -->
    <che-label-container che-label-name="Raw Configuration"
                         che-label-description="JSON definition of the stack.">
      <che-show-area>
        <div class="stack-editor">
              <textarea class="stack-editor"
                        ui-codemirror="stackController.editorOptions"
                        ng-model="stackController.stackJson"
                        ng-model-options="{ updateOn: 'default blur', debounce: { 'default': 500, 'blur': 0 } }"
                        ng-change="stackController.updateStackFromJson()"
                        aria-label="Stack configuration editor">
      </textarea>
          <a target="_blank" ng-href="{{branding.docs.stack}}">Docs: Stack Structure</a>
        </div>
      </che-show-area>
    </che-label-container>
    <!-- Delete stack -->
    <che-label-container class="stack-delete-label"
                         ng-if="!stackController.isCreation"
                         che-label-name="Delete stack"
                         che-label-description="This is irreversible. This stack will not be available when creating a workspace.">
      <che-button-danger che-button-title="Delete"
                         ng-click="stackController.deleteStack()"></che-button-danger>
    </che-label-container>

  </md-content>
  <workspace-edit-mode-overlay ng-show="stackController.isStackChange"
                               workspace-edit-disable-save-button="!stackForm.$valid"
                               workspace-edit-mode-on-save="stackController.saveStack()"
                               workspace-edit-mode-on-cancel="stackController.cancelStackChanges()">
    <che-button-primary ng-disabled="!stackForm.$valid"
                        che-button-title="Test" name="testButton"
                        ng-click="stackController.showSelectTemplateDialog($event)"></che-button-primary>
  </workspace-edit-mode-overlay>
</ng-form>
<md-content ng-show="stackController.invalidStack">
  {{stackController.invalidStack}}
</md-content>
